<template>
    <div style="margin-top: 20px">
        <span>上传通知书</span>
        <el-upload style="margin-left: 10px;display: inline"
                   :show-file-list="false"
                   :headers='token'
                   :action="uploadUrl"
                   ref="upload"
                   :accept="fileSuffix"
                   :on-success="handleSuccess"
                   :on-progress="progress"
                   :on-error="fileError"
                   :before-upload="beforeUpload"
                   v-loading.fullscreen.lock="loading"
                   :element-loading-text="progressPercentTitle"
                   element-loading-spinner="el-icon-loading"
                   element-loading-backgroud="rgba(0,0,0,0.1)"
        >
            <el-button size="small" type="primary">{{ buttonName }}</el-button>
            <div slot="tip" class="el-upload__tip">{{ hint }}</div>
        </el-upload>
    </div>
</template>
<script>
export default {
    props:{
        // 文件上传的url
        uploadUrl:{
            type: String,
            required: true
        },
        // 按钮的名字
        buttonName: {
            type: String,
            required: true
        },
        // 下面的提示语
        hint: {
            type: String,
            required: true
        },
        // 上传完之后走的查询
        queryClick:{
            type: Function
        },
        // 文件后缀
        fileSuffix:{
            type: String,
            required: true
        },
        // 是否上传完走查询条件,默认不走
        isQuery:{
          type: Boolean,
            default() {
                return false
            }
        }

    },
    watch:{
        uploadUrl(newVal, oldVal){
            this.uploadPath = newVal;
        },
        buttonName(newVal, oldVal){
            this.button = newVal;
        },
        hint(newVal, oldVal){
            this.hints = newVal;
        },

    },
    data(){
        return{
            uploadPath: "",
            button: "",
            hints: "",
            progressPercentTitle: "", // 展示百分比
            progressPercent: 0, // 进度
            loading: false,
            token: { Authorization:localStorage.getItem("token") },
        }
    },
    methods: {
        // 文件上传之前钩子
        beforeUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 200;
            if (!isLt2M) {
                this.$message.error('上传文件大小大小不能超过 200MB!');
                return false;
            }
            if (this.fileSuffix === ".pdf"){
                if (file.type !== "application/pdf"){
                    this.$message.error('上传文件必须是pdf');
                    return false;
                }
            }
        },
        // 上传文件时钩子
        progress(event,file,fileList){
            this.loading = true;
            this.progressPercent = Math.floor(event.percent);
            this.progressPercentTitle = "已上传" + this.progressPercent + "%"
        },
        // 文件上传失败
        fileError(){
            this.loading=false;
            this.$message.error("失败")
        },
        handleSuccess(res, file, fileList){
            this.loading = false;
            // this.$message.success("上传成功")
            // 必须在上传成功之后 进度条继续++
            if (res.status == true) {
                //关闭遮罩，进度条归零
                this.loading = false
                this.progressPercent = 0
            }
            if (this.isQuery){
                this.queryClick();
            }
            alert("上传成功！")
        },
    }
}
</script>

<style scoped>

</style>
